<template>
  <div class="dialogs">
    <div class="dialog-herder">
      <slot name="slot-header">具体名字的插槽占位，传值也要通过名字</slot>
    </div>
    <!-- 变动的内容使用插槽占位 -->
    <div class="dialog-main">
      <slot name="slot-main">这里可以自定义内容</slot>
    </div>
    <div class="dialog-footer">
      <slot name="slot-footer">这里可以自定义按钮</slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.dialogs {
  width: 200px;
  height: 200px;
  border: 3px #000 solid;
  .dialog-herder {
    width:200px;
    height: 20px;
    border: 1px red solid;
  }
  .dialog-main {
        width:200px;
    height: 100px;
    border: 1px yellow solid;
  }
  .dialog-footer {
            width:200px;
    height: 30px;
    border: 1px rgb(16, 87, 168) solid;
  }
}
</style>